<script setup lang="ts">
import { delRoleUserAPI, getRoleDetailAPI, getRoleListAPI, getRoleUserAPI, getTreeListAPI } from '@/apis/system';
import type { Role, RoleData, RoleUser } from '@/types/system';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router'
const router = useRouter()
//角色列表数据 
const roleList = ref<Role[]>([])
//获取角色列表
const getRoleList = async()=>{
  const res = await getRoleListAPI()
  roleList.value = res.data
  getRoleDetail(roleList.value[0].roleId as number)
  getRoleUserList(roleList.value[0].roleId as number)
}
//点击激活交互
const activeIndex = ref(0)
const changeRole = (idx: number) => {
  // console.log(idx);
  activeIndex.value = idx
  const roleId = roleList.value[idx].roleId
  if (roleId) { 
    getRoleDetail(roleId)
    getRoleUserList(roleId)
  }
}
//定义权限列表数据
const treeList = ref<RoleData[]>([])
//获取权限列表
const getTreeList = async () => { 
  const res = await getTreeListAPI()
  treeList.value = res.data
  addDisabled(treeList.value)
}
//递归处理函数
const addDisabled = (treeList:RoleData[]) => { 
  treeList.forEach((item) => { 
    item.disabled = true
    if (item.children) {
      addDisabled(item.children)
    }
  })
}
//绑定树形组件的ref
const treeRef = ref()
//获取当前角色的权限点
const perms = ref<number[]>([])
//封装请求方法
const getRoleDetail = async (roleId:number) => { 
  const res = await getRoleDetailAPI(roleId)
  perms.value = res.data.perms

  treeRef.value.forEach((tree: { setCheckedKeys: (arg0: number) => void; }, index: number) => { 
    tree.setCheckedKeys(perms.value[index])
  })

}


//tab切换
const activeName = ref<'tree' | 'member'>('tree')

//定义成员列表数据
const roleUserList = ref<RoleUser[]>([])
//获取当前角色下的成员列表
const getRoleUserList = async (roleId:number) => { 
  const res = await getRoleUserAPI(roleId)
  roleUserList.value = res.data.rows
}

//编辑
const onCommand = (command: string, roldId: number) => {
  console.log(command);
  if (command === 'edit'){
    router.push(`/roleAdd?id=${roldId}`)
  }
  if (command === 'del'){
    ElMessageBox.confirm('是否确认删除当前角色?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      await delRoleUserAPI(roldId + '')
      await getRoleList()
      ElMessage({
        type: 'success',
        message: '删除成功!'
      })
    })
  }
}


onMounted(() => {
  getRoleList()
  getTreeList()
})
</script>

<template>
  <div class="role-container">
    <div class="left-wrapper">
      <div class="role-item" 
      v-for="(item,index) in roleList" 
      :key="item.roleId"
      :class="{ active: index === activeIndex }"
      @click="changeRole(index)"
      >
        <div class="role-info">
          <img src="@/assets/user.svg" class="icon" />
          {{item.roleName}}
        </div>
        <div class="more">
          <el-dropdown @command="onCommand($event, item.roleId!)">
            <span class="el-dropdown-link">
              <img src="@/assets/more.svg" class="icon" />
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="edit">编辑角色</el-dropdown-item>
                <el-dropdown-item command="del">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <el-button class="addBtn" size="small" @click="$router.push('/roleAdd')">添加角色</el-button>
    </div>
    <!-- 右侧权限和成员 -->
    <div class="right-wrapper">
      <el-tabs v-model="activeName">
        <el-tab-pane label="功能权限" name="tree">
          <div class="tree-wrapper">
        <div v-for="item in treeList" :key="item.id" class="tree-item">
          <div class="tree-title"> {{item.title}} </div>
          <el-tree
            ref="treeRef"
            :data="item.children"
            node-key="id"
            :props="{label: 'title'}"
            show-checkbox
            :default-expand-all="true"
            check-strictly
            />
        </div>
      </div>
        </el-tab-pane>
        <el-tab-pane :label="`成员(${roleUserList.length})`" name="member">
          <div class="user-wrapper">
          <el-table :data="roleUserList">
            <el-table-column type="index" width="250" label="序号" />
            <el-table-column prop="name" label="员工姓名" />
            <el-table-column prop="userName" label="登录账号" />
          </el-table>
        </div>
        </el-tab-pane>
      </el-tabs>
</div>
  </div>
</template>

<style scoped lang="scss">
.role-container {
  display: flex;
  font-size: 14px;
  background-color: #fff;

  .left-wrapper {
    width: 200px;
    border-right: 1px solid #e4e7ec;
    padding: 4px;
    text-align: center;

    .role-item {
      position: relative;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      cursor: pointer;

      &.active {
        background: #edf5ff;
        color: #4770ff;
      }
    }

    .role-info {
      display: flex;
      align-items: center;

      .icon {
        margin-right: 10px;
        width: 20px;
      }
    }

    .more {
      display: flex;
      align-items: center;
      .icon {
          width: 15px;
        }
    }

    .addBtn {
      width: 100%;
      margin-top: 20px;
    }
  }

  .right-wrapper {
    flex: 1;

    .tree-wrapper {
      display: flex;
      justify-content: space-between;

      .tree-item {
        flex: 1;
        border-right: 1px solid #e4e7ec;
        padding: 0px 4px;
        text-align: center;

        .tree-title {
          background: #f5f7fa;
          text-align: center;
          padding: 10px 0;
          margin-bottom: 12px;
        }
      }
    }

    ::v-deep .el-tabs__nav-wrap {
      padding-left: 20px;
    }

    .user-wrapper {
      padding: 20px;
    }
  }
}
</style>